<template>
	<div class="login">
		<el-card class="login-card">
			<div class="login-title">用户登录</div>
			<el-form ref="formRef" :rules="rules" :model="form" class="form" >
				<el-form-item 
				label="用户名"
				prop="username"
				>
					<el-input maxlength="16" v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item 
				label="密&emsp;码"
				prop="password"
				>
					<el-input maxlength="16" v-model="form.password" show-password></el-input>
				</el-form-item>
				<el-form-item 
				label="验证码"
				prop="captcha"
				>
					<el-row>
						<el-input maxlength="6" clearable v-model="form.captcha" style="width: 120px;"></el-input>
						<el-image alt="点击刷新" style="width: 120px;" class="captcha-img" :src="captchaBody" @click="getCaptcha"></el-image>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="form.rememberMe" label="7天内免密登录"/>
				</el-form-item>
				<el-row justify="space-evenly">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-row>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import { TOKEN_KEY } from '@/utils/constants'
import { login } from '@/api/user'
import { getCaptcha } from '@/api/file'
import storage from 'store'
import { checkLogin } from '@/utils/util'
import { ElMessage } from 'element-plus'
export default{
	name: 'Login',
	data() {
		return {
			captchaBody: '',
			form: {
				username: '',
				password: '',
				captcha: '',
				captchaId: '',
				rememberMe: true
			},
			formRef: Object(),
			rules: {
				username: [
					{ required: true, message: '用户名不能为空', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' }
				],
				captcha: [
					{ required: true, message: '验证码不能为空', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		getCaptcha: function(){
			getCaptcha()
			.then(ret => {
				this.form.captchaId = ret.headers['x-captcha-id']
				this.captchaBody = 'data:image/png;base64,'+ btoa(new Uint8Array(ret.data).reduce((data,byte) => data + String.fromCharCode(byte),""))
				console.log(this.form)
			})
		},
		login: function(){
			let that = this
			this.$refs.formRef.validate((valid) => {
				if(valid){
					login(this.form)
					.then((res) => {
						if(res.code === 0){
							let token = {
								token: res.data.token,
								addtime: new Date().getTime()
							}
							storage.set('rememberMe',this.form.rememberMe)
							if(this.form.rememberMe){
							    storage.set(TOKEN_KEY,token)
							}else{
								sessionStorage.setItem(TOKEN_KEY,JSON.stringify(token))
							}
							that.$router.push('/')
						}else{
							ElMessage.error(res.msg)
						}
					})
				}else{
					return false
				}
			})
		},
		resetForm: function(){
			this.$refs.formRef.resetFields()
		}
	},
	mounted() {
		checkLogin(this)
		this.getCaptcha()
	}
}
</script>

<style scoped>
.login{
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center,#FFFFFF,#409EFF);
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-card{
	width: 450px;
	height: 350px;
	display: flex;
	justify-content: center;
}
.login-title{
	font-size: 30px;
	font-weight: bold;
	color: #409EFF;
	text-align: center;
	margin-bottom: 30px;
}
.form{
	width: 310px;
}
.captcha-img{
	width: 120px;
	margin-left: 5px;
	cursor: pointer;
}
</style>